<template>
    <div class="table-wrap el-box-init el-bkgd-white">
        <div class="table-btn-item el-pd-b-20" v-if="table.headBtn">
            <table-btn classPrefix="table-head_btn" :size="table.size" :list="table.headBtn" />
        </div>

        <el-table
            v-loading="table.loading"
            :data="table.list"
            :size="table.size"
            :stripe="table.stripe"
            :border="table.border"
            :fit="table.fit"
            :show-header="table.showHead"
            :highlight-current-row="table.highlight"
            @selection-change="handleSelectionChange"
            :row-key="getRowKeys"
            class="tatle el-table"
            ref="tableRef"
        >
            <!-- 单选/全选 -->
            <el-table-column v-if="table.selection" type="selection"></el-table-column>
            <!-- 输入排序 -->
            <el-table-column v-if="table.sort" label="排序" width="80" align="center">
                <template #default="{ row }">
                    <el-input
                        type="text"
                        :maxlength="4"
                        class="table-column-sort"
                        v-model="row.sort"
                    ></el-input>
                </template>
            </el-table-column>
            <!-- 其他列 -->
            <el-table-column
                v-for="(col, index) in table.col"
                :key="index"
                :prop="col.prop"
                :label="col.label"
                :width="col.width || ''"
                :align="col.align || ''"
            >
                <template #default="{ row }">
                    <template v-if="col.formatter && !col.type">
                        {{ col.formatter(row) }}
                    </template>
                    <template v-else-if="col.formatter && col.type === 'tag'">
                        <el-tag :type="col.formatter(row, col.type)">
                            {{ col.formatter(row) }}
                        </el-tag>
                    </template>
                    <template v-else-if="col.type === 'popover'">
                        <el-popover placement="right" trigger="hover" v-if="row[col.prop]">
                            <template #reference>
                                <img class="el-popover-minImg" :src="row[col.prop]" />
                            </template>
                            <template #default>
                                <img class="el-popover-img" :src="row[col.prop]" />
                            </template>
                        </el-popover>
                    </template>
                    <template v-else-if="col.type === 'date'">
                        {{ formatTime(row[col.prop]) }}
                    </template>
                    <template v-else>
                        <div class="table-text">{{ row[col.prop] }}</div>
                    </template>
                </template>
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column
                v-if="table.colBtn"
                :width="table.colBtn.width || ''"
                label="操作"
                align="center"
                fixed="right"
            >
                <template #default="{ row }">
                    <table-btn
                        classPrefix="table-col_btn"
                        :size="table.size"
                        :list="table.colBtn.data"
                        :dataItem="row"
                    />
                </template>
            </el-table-column>
        </el-table>

        <div class="el-center el-mg-t-20">
            <el-pagination
                v-if="table.paging"
                background
                :current-page="table.paging.currentPage"
                :page-size="table.paging.pageSize"
                :page-sizes="table.paging.pageSizes"
                :layout="table.paging.layout"
                :total="table.paging.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import { getCurrentInstance, reactive, toRefs } from 'vue';

export default {
    name: 'common-table',
    props: {
        table: {
            type: Object,
            default: new Object()
        }
    },
    setup(props) {
        const { proxy } = getCurrentInstance();
        // 回显选择过的列
        const getRowKeys = (row) => {
            return row.id;
        };
        // 全选
        const handleSelectionChange = (rows) => {
            proxy.$emit('handleSelectionChange', rows);
        };
        // 每页多少条
        const handleSizeChange = (val) => {
            proxy.$emit('handleSizeChange', val);
        };
        // 当前页
        const handleCurrentChange = (val) => {
            proxy.$emit('handleCurrentChange', val);
        };

        // 日期格式化
        const formatTime = (value) => {
            return proxy.$formatTime(value);
        };

        return {
            getRowKeys,
            handleSelectionChange,
            handleSizeChange,
            handleCurrentChange,
            formatTime
        };
    }
};
</script>

<style lang="less">
.table-operate {
    display: inline-block;
}
.table-head_btn {
    margin-right: 10px;
}
.table-col_btn {
    margin-right: 5px;
}
</style>
